<template>
    <div class="input-box displayFlex flex-algin-center">
        <input class="price-input flex1" type="number" v-model="appraiseValue" placeholder="请输入平均价" @blur="iosBlur(1000,1000),forbidSwiper(false)" @focus="forbidSwiper(true)" />
        <span class="vertical-line"></span>
        <span class="appraise-price-btn" @click="$emit('doAppraise',appraiseValue,inputAppraise)">
            我来估价 <br /><span class="fontSize12" v-if="inputAppraise.validNum">(剩{{inputAppraise.validNum}}次)</span>
            <span class='wrapMsg displayBlock' style="width: 100%;height: 1px;"></span>
        </span>
        <div id="inputBugLine"></div>
    </div>
</template>

<script>
    export default {
        name: "InputAppraise",
        props:{
            inputAppraiseProp:Object,
        },
        data(){
            return{
                appraiseValue:null,
                inputAppraise:{
                    validNum:0,
                    actKey:0,
                },
            }
        },
        mounted(){
            let that = this;
            this.inputAppraise = Object.assign({},this.inputAppraise,this.inputAppraiseProp)
        },
        methods:{
            forbidSwiper(boolean) {
                /*禁止swiper滑动*/
                let that = this;
                // setTimeout(()=>{
                //     that.appraiseValue = 1
                // },100)
                this.$emit('forbidSwiper',boolean);
                this.$emit('inputFocus',boolean);
                /*输入框进入的时候确定swiper的位置，修改错位的bug*/
            },
        },
        watch:{
            inputAppraiseProp(val){
                this.inputAppraise = Object.assign({},this.inputAppraise,val)
            },
        }
    }
</script>

<style scoped>
    .input-box{
        background-image: linear-gradient(to bottom ,#FFD906,#FFAC0B);
        border-radius:.25rem;
        box-sizing: border-box;
        padding: .05rem .07rem .05rem .15rem;
        height: .4rem;
        margin-top: .1rem;
    }
    .price-input{
        outline: none;
        border: none;
        font-size: .16rem;
        color: rgba(255,255,255,1) ;
        width: 1rem;
        background-color: transparent;
    }
    .price-input::-ms-input-placeholder{
        color: rgba(255,255,255,1) ;
        font-size: .16rem!important;
    }
    .price-input::placeholder{
        color: rgba(255,255,255,1) ;
        font-size: .16rem!important;
    }
    .price-input::-webkit-input-placeholder{
        color: rgba(255,255,255,1) ;
        font-size: .16rem;
     }
    .appraise-price-btn{
        display: inline-block;
        /*border-left: 1px solid #fff;*/
        /*border: 2px solid;*/
        /*border-image: linear-gradient(to bottom,transparent 20%,#fff 50%,transparent 70%,transparent 100%) 100 100 100 100;*/
        padding:0 .1rem ;
        text-align: center;
        color: #fff;
        font-size: .16rem;
        text-shadow: .005rem .005rem #FF6714;
    }
    .vertical-line{
        display: inline-block;
        width: 1px;
        height: .15rem;
        background-color: #fff;
    }
</style>
<!--<style>-->
    <!--.price-input::placeholder {-->
        <!--color: red;-->
        <!--font-size: 22px;-->
    <!--}-->
<!--</style>-->